<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <link rel="stylesheet" href="./css/swiper.css">
  <link rel="stylesheet" href="https://at.alicdn.com/t/c/font_4002669_pgzcltvotc.css" />
  <link rel="stylesheet" href="css/index.css" />
  <title>智慧商城</title>
</head>

<body>
  <div id="app">
    <!-- header -->
    <header>智慧商城</header>

    <!-- search -->
    <div class="search">
      <a href="javascript:;" class="searchCont">
        <i class="iconfont icon-sousuo"></i>
        <p>搜索商品</p>
      </a>
    </div>

    <!-- banner -->
    <div class="banner">
      <!-- swiper -->
      <div class="swiper">
        <!-- 轮播图 -->
        <div class="swiper-wrapper" v-for="item in swiperList">
          <div class="swiper-slide">
            <a href="javascript:;">
              <img :src="item.imgUrl" alt="" />
            </a>
          </div>
        </div>

        <!--分页器-->
        <div class="swiper-pagination"></div>
      </div>
    </div>

    <!-- 广告 -->
    <div class="ad">
      <i class="iconfont icon-shengyin_shiti"></i>
      <div class="adCont">
        <p>智慧商城2.0全新上线，更多新品等你来选~</p>
      </div>
    </div>
   
    <!-- 新品发布 -->
    <div class="main">
      <section class="section1">
        <a href="javascript:;" v-for="item in navList">
          <div>
            <img :src="item.imgUrl" alt="" />
          </div>
          <p>{{item.text}}</p>
        </a>
      </section>

      <section class="section2">
        <a href="javascript:;">
          <img src="http://cba.itlike.com/public/uploads/10001/20230320/647c6bde4b1f1a3e88955e5f596344f9.png" alt="" />
        </a>
      </section>

      <section class="section3">
        <h2>——&nbsp;&nbsp;猜你喜欢&nbsp;&nbsp;——</h2>

        <!-- 商品列表 -->
        <ul class="section3Ul">
          <li v-for="item in goodsList">
            <a href="javascript:;">
              <img :src="item.imgUrl" alt="" />
              <div class="goodCont">
                <h3>{{item.goods_name}}</h3>
                <p class="selled">已售{{item.goods_sales}}件</p>
                <p class="price">¥{{item.goods_price_max}}<span>¥{{item.line_price_max}}</span></p>
              </div>
            </a>
          </li>
        </ul>
      </section>
    </div>

    <!-- footer -->
    <footer>
      <a href="javascript:;" class="cur">
        <i class="iconfont icon-shouye"></i>
        <p>首页</p>
      </a>
      <a href="javascript:;">
        <i class="iconfont icon-fenlei"></i>
        <p>分类</p>
      </a>
      <a href="javascript:;">
        <i class="iconfont icon-gouwuche"></i>
        <p>购物车</p>
      </a>
      <a href="javascript:;">
        <i class="iconfont icon-wode"></i>
        <p>我的</p>
      </a>
    </footer>
  </div>
</body>
<script src="./js/axios.js"></script>
<script src="./js/swiper.js"></script>
<script src="./js/vue.js"></script>
<script src="./js/index.js"></script>
<!-- <script>

  const app = new Vue({
    el: "#app",
    data: {
      swiperList: [], // 轮播数据
      navList: [], // 导航数据
      goodsList: [], // 商品数据
    },
    created() { },
    mounted() {
      this.getData();
    },
    methods: {
      async getData() {
        const res = await axios.get(
          "https://smart-shop.itheima.net/index.php?s=/api/page/detail",
          {
            pageId: 0,
          }
        );
        console.log(res.data.data.pageData);
      },
    },
  });
</script> -->

</html>